<template>
	<view>
		<uni-popup ref="addAlipay">
			<view class="pop-center-main">
				<view class="pop-top-title">
					<view class="title">添加支付宝</view>
					<image src="@/static/qw@2x.png" @click="closeAlipay"></image>
				</view>
				<view class="pop_orage">
					*只能添加【{{name}}】的支付宝
				</view>
				<view class="pop_input">
					<input placeholder="请输入支付宝账号"  v-model="add_zfb_accon"/>
				</view>
				<view class="pop-center-button mt44 mb20" @click="setWithdrawAli">
						确认提交
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="addWx">
			<view class="pop-center-main">
				<view class="pop-top-title">
					<view class="title">客服微信</view>
					<image src="@/static/qw@2x.png" @click="closeWx"></image>
				</view>
				<view class="pop_orage">
					使用【{{name}}】的微信账号扫描下方二维码授权，即可自动添加微信账号
				</view>
				<view class="text-center  mt32">
					<!-- #ifdef APP-PLUS -->
					<image :src="img.replace(/[\r\n]/g,'')" class="add-wx-img" @longpress="ewmApp(1)" show-menu-by-longpress=true></image>
					<!-- #endif -->
					<!-- #ifndef APP-PLUS -->
					<image :src="img.replace(/[\r\n]/g,'')" class="add-wx-img" show-menu-by-longpress=true></image>
					<!-- #endif -->
				</view>
				<view class="add-wx-msg">
					长按识别或保存二维码绑定账号
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="addBank">
			<view class="pop-center-main">
				<view class="pop-top-title">
					<view class="title">添加银行卡</view>
					<image src="@/static/qw@2x.png" @click="closeBank"></image>
				</view>
				<view class="pop_orage">
					*只能添加【{{name}}】的银行卡
				</view>
				<view class="pop_input">
					<input placeholder="请输入银行卡卡号" type="number" v-model="add_bank_num" @input="BankName(1)"/>
				</view>
				<view class="pop_input flex-between" @tap="getBank(1)" >
					<!-- <input placeholder="所属银行" type="number"  v-model="add_bank_name" disabled  @tap="getBank(1)"/> -->
					<view class="ml20 ft28">{{add_bank_name?add_bank_name:'请选择所属银行'}}</view>
					<view class="icon-youjiantou iconfont c_DEDEDE ft40"  ></view>
				</view>
				<view class="pop-center-button mt44 mb20" @click="setWithdrawBank">
						确认提交
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="updateAlipay">
			<view class="pop-center-main">
				<view class="pop-top-title">
					<view class="title">修改支付宝</view>
					<image src="@/static/qw@2x.png" @click="closeUpdateAlipay"></image>
				</view>
				<view class="pop_orage">
					*只能添加【{{name}}】的支付宝
				</view>
				<view class="pop_input">
					<input placeholder="请输入支付宝账号"  v-model="updateAlipayData.add_zfb_accon"/>
				</view>
				<view class="pop-center-button mt44 mb20" @click="upWithdrawAli">
						确认提交
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="updateBank">
			<view class="pop-center-main">
				<view class="pop-top-title">
					<view class="title">修改银行卡</view>
					<image src="@/static/qw@2x.png" @click="closeUpdateBank"></image>
				</view>
				<view class="pop_orage">
					*只能添加【{{name}}】的银行卡
				</view>
				<view class="pop_input">
					<input placeholder="请输入银行卡卡号" type="number" v-model="updateBankDate.account" @input="BankName(2)"/>
				</view>
				<view class="pop_input flex-between" @tap="getBank(2)" >
					<!-- <input placeholder="所属银行" type="number"  v-model="add_bank_name" disabled  @tap="getBank(1)"/> -->
					<view class="ml20 ft28">{{updateBankDate.bank_name?updateBankDate.bank_name:'请选择所属银行'}}</view>
					<view class="icon-youjiantou iconfont c_DEDEDE ft40"  ></view>
				</view>
				<view class="pop-center-button mt44 mb20" @click="upWithdrawBank">
						确认提交
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import * as Api from '@/api/user.js'
	import config from '@/config.js'
	export default{
		props:{
			name:{
				type: String,
				default:""
			}
		},
		data(){
			return{
				add_zfb_accon:"",
				img:"",
				add_bank_name:"",
				add_bank_num:"",
				
				AccountId:null,
				updateAlipayData:{
					add_zfb_accon:""
				},
				updateBankDate:{
					account:"",
					bank_name:""
				},
				wemIndex:0,
				fwdsda:{}
			}
		},
		onShow() {
			
		},
		onLoad() {
			
		},
		methods:{
			bankSelect(item){
				let loggt = uni.getStorageSync("loggType")
				setTimeout(() => {
					// console.log(this.updateBankDate);
					if(loggt === "1"){
						this.add_bank_name = item
					}else{
						// this.closeUpdateBank()
						// this.$refs.updateBank.close()
						// setTimeout(() => {
						// 	this.openUpdateBank(10,'46546546','中国银行')
						// },500)
						// this.updateBankDate = {}
						// console.log(this.fwdsda);
						console.log(item);
						// let bank_name = uni.getStorageSync("bankListOne").bank_name
						this.updateBankDate.bank_name = item
						// console.log(this.updateBankDate)
					}
				},500)
			},
			getBank(type){
				uni.setStorageSync("loggType",String(type))
				uni.navigateTo({
					url:'/pages/user/user_item/bank/index'
				})
			},
			BankName(type){
				let token = uni.getStorageSync("AccessToken")
				Api.getBankName({
					account:type === 1?this.add_bank_num:this.updateBankDate.account,
					token:token
				}).then(res => {
					if(res.code === 1){
						if(res.data){
							if(type === 1){
								this.add_bank_name = res.data
							}else{
								this.updateBankDate.bank_name = res.data
							}
							
						}
					}
				})
			},
			ewmApp(type){
				let _this = this
				uni.showActionSheet({
					itemList: ['保存图片'],
					success: function (res) {
						if(res.tapIndex === 0){
							if(type === 1){
								_this.baseApp()
							}else{
								_this.downLoadImg()
							}
							
						}
					},
					fail: function (res) {
						
					}
				});
			
			},
			downLoadImg(){
				
				let img = 'https://card.doudshou.com/qy/serve.png'
				uni.downloadFile({
					url: img,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: "失败啦",
							icon: "none"
						});
					}
				})
			},
			baseApp(){
				const bitmap = new plus.nativeObj.Bitmap("test");
				bitmap.loadBase64Data(this.img, function() {
					const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式
					bitmap.save(url, {
						overwrite: true, // 是否覆盖
						// quality: 'quality'  // 图片清晰度
					}, (i) => {
						uni.saveImageToPhotosAlbum({
							filePath: url,
							success: function() {
								uni.showToast({
									title: '图片保存成功',
									icon: 'none'
								})
								bitmap.clear()
							}
						});
					}, (e) => {
						uni.showToast({
							title: '图片保存失败',
							icon: 'none'
						})
						bitmap.clear()
					});
				}, (e) => {
					uni.showToast({
					title: '图片保存失败',
						icon: 'none'
					})
					bitmap.clear()
				});
			},
			openWxServer(index){
				if(index){
					this.wemIndex = index
				}else{
					this.wemIndex = 0
				}
				this.$refs.addServer.open('center')
			},
			closeWxServer(){
				this.$refs.addServer.close()
			},
			clearnDelId(){
				this.AccountId = ''
				setTimeout(() => {
					this.$emit('getWithdrawList')
				},1000)
			},
			delWithdrawAli(index){
				let _this = this
				let token = uni.getStorageSync("AccessToken")
				if(index === 1){
					Api.delWithdrawAli({
						wxapp_id: _this.$wxapp_id,
						token,
						id:_this.AccountId
					}).then(res => {
						_this.$toast(res.msg)
						if(res.code === 1){
							_this.clearnDelId()
						}
					})
				}else if(index === 3){
					Api.delWithdrawWx({
						wxapp_id: _this.$wxapp_id,
						token,
						id:_this.AccountId
					}).then(res => {
						if(res.code === 1){
							_this.clearnDelId()
						}
					})
				}else if (index === 2){
					Api.delWithdrawBank({
						wxapp_id: _this.$wxapp_id,
						token,
						id:_this.AccountId
					}).then(res => {
						if(res.code === 1){
							_this.clearnDelId()
						}
					})
				}
			},
			openDeal(id,index){
				this.AccountId = id
				uni.showModal({
					title:"温馨提示",
					content:"确认删除此账号么",
					// showCancel:false,
					success: (res) => {
						if(res.confirm){
							this.delWithdrawAli(index)
						}
					}
				})
			},
			upWithdrawBank(){
				let _this = this
				if(!_this.updateBankDate.account){
					_this.$toast("账号不能为空")
					return
				}
				if(!_this.updateBankDate.bank_name){
					_this.$toast("银行卡开户行不能为空")
					return
				}
				let token = uni.getStorageSync("AccessToken")
				Api.upWithdrawBank({
					wxapp_id: _this.$wxapp_id,
					token,
					id:_this.AccountId,
					account:_this.updateBankDate.account,
					bank_name:_this.updateBankDate.bank_name,
				}).then(result => {
					_this.$toast(result.msg)
					if(result.code === 1){
						_this.AccountId = null
						_this.updateBankDate.bank_name = ""
						_this.updateBankDate.account = ""
						setTimeout(() => {
							_this.closeUpdateBank()
							_this.$emit('getWithdrawList')
						},1000)
					}
				})
			},
			upWithdrawAli(){
				let _this = this
				if(!_this.updateAlipayData.add_zfb_accon){
					_this.$toast("账号不能为空")
					return
				}
				let token = uni.getStorageSync("AccessToken")
				Api.upWithdrawAli({
					wxapp_id: _this.$wxapp_id,
					token,
					id:_this.AccountId,
					account:_this.updateAlipayData.add_zfb_accon
				}).then(result => {
					_this.$toast(result.msg)
					if(result.code === 1){
						_this.AccountId = null
						_this.updateAlipayData.add_zfb_accon = ""
						setTimeout(() => {
							_this.closeUpdateAlipay()
							_this.$emit('getWithdrawList')
						},1000)
					}
				})
			},
			// 获取二维码
			getQrcode(){
				let _this = this
				let token = uni.getStorageSync("AccessToken")
				Api.getWithdrawAppId({
					wxapp_id: _this.$wxapp_id,
					token: token,
				}).then(res => {
					let appid = res.data
					let url = config.addWxUrl+'/pages/user/'+'setup/'+ 'bindaccount?appid='+appid + "&token="+token
					uni.showLoading({
						mask: true,
						title: '生成中...'
					})
					url = encodeURIComponent(url)
					Api.getJsonQrcode({
						data:url
					}).then(result => {
						let image = 'data:image/png;base64,' +result.data
						this.img = image
						this.$emit('judge_img',this.img)
						uni.hideLoading()
					})
				})
			},
			setWithdrawBank(){
				let _this = this
				if(!_this.$fxLink.checkBank(_this.add_bank_num)){
					_this.$toast("请输入正确的账号")
					return
				}
				if(!_this.add_bank_name){
					_this.$toast("银行卡开户行不能为空")
					return
				}
				let token = uni.getStorageSync("AccessToken")
				Api.setWithdrawBank({
					token,
					wxapp_id: _this.$wxapp_id,
					account:_this.add_bank_num,
					bank_name:_this.add_bank_name,
				}).then(result => {
					_this.$toast(result.msg)
					if(result.code === 1){
						_this.add_bank_num = ''
						_this.add_bank_name = ''
						setTimeout(() => {
							_this.closeBank()
							_this.$emit('getWithdrawList')
						},1000)
					}
				})
			},
			setWithdrawAli(){
				let _this = this
				if(!_this.add_zfb_accon){
					_this.$toast("账号不能为空")
					return
				}
				let token = uni.getStorageSync("AccessToken")
				Api.setWithdrawAli({
					token,
					wxapp_id: _this.$wxapp_id,
					account:_this.add_zfb_accon,
				}).then(result => {
					_this.$toast(result.msg)
					if(result.code === 1){
						_this.add_zfb_accon = ''
						setTimeout(() => {
							_this.closeAlipay()
							_this.$emit('getWithdrawList')
						},1000)
					}
				})
			},
			openUpdateBank(id,account,bank_name){
				this.fwdsda = {
					id:id,
					account:account,
					bank_name:bank_name
				}
				this.AccountId = id 
				this.updateBankDate.account = account
				this.updateBankDate.bank_name = bank_name
				this.$refs.updateBank.open('center')
			},
			closeUpdateBank(){
				this.$refs.updateBank.close()
			},
			openUpdataAlipay(id,account){
				console.log(account);
				this.AccountId = id
				this.updateAlipayData.add_zfb_accon = account
				console.log(this.updateAlipayData);
				this.$refs.updateAlipay.open('center')
			},
			openAddBank(){
				this.$refs.addBank.open('center')
			},
			openAddWx(){
				if(!this.img){
					this.getQrcode()
				}
				this.$refs.addWx.open('center')
			},
			openAddAlipay(){
				this.$refs.addAlipay.open('center')
			},
			closeUpdateAlipay(){
				this.$refs.updateAlipay.close()
			},
			closeBank(){
				this.$refs.addBank.close()
			},
			closeWx(){
				this.$refs.addWx.close()
			},
			closeAlipay(){
				this.$refs.addAlipay.close()
			},
		}
	}
</script>

<style lang="scss">
	.add-wx-img{
		width: 80%;
		height: 400rpx;
		border: 1rpx dashed #000;
		padding: 20rpx;
	}
	.add-wx-msg{
		background-color: #FFF5F9;
		color: #333;
		font-weight: 600;
		font-size: 28rpx;
		padding: 16rpx 30rpx;
		text-align: center;
		margin-top: 20rpx;
	}
</style>